<template>
    <div class="search_detail">
        <h3>找到{{ musiclist.tracks.length }}首歌曲</h3>
        <el-table
            :data="musiclist.tracks"
            stripe
            style="width: 100%"
            @row-dblclick="clickRow"
        >
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column width="50">
                <template>
                    <i class="iconfont icon-download"></i>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="音乐标题"> </el-table-column>
            <el-table-column prop="ar[0].name" label="歌手"> </el-table-column>
            <el-table-column prop="al.name" label="专辑"> </el-table-column>
            <el-table-column prop="dt" label="时长"> </el-table-column>
        </el-table>
    </div>
</template>

<script>
import MusicTable from "@/components/musicTable/MusicTable";
export default {
    data() {
        return {
            musiclist: {
                tracks: []
            }
        };
    },
    components: { MusicTable },
    methods: {
        clickRow(row) {
            this.$store.commit("updateMusicId", row.id);

            if (row.id != this.$store.state.musicListId) {
                // 将歌单传到vuex
                this.$store.commit("updateMusicList", {
                    musicList: this.musicList.tracks,
                    musicListId: this.musicList.id
                });
            }
        }
    },
    created() {
        this.musiclist.tracks = JSON.parse(this.$route.query.songs);
    }
};
</script>

<style>
.search_detail {
    padding: 30px;
}
</style>
